<template>
  <div :class="['section', 'index']">

    <div class="logo">
      <img src="../assets/images/logo.png">
    </div>

    <div class="slogan">
      <p>你办囍事</p>
      <p>我送囍酒</p>
    </div>

    <div class="btns">
      <div class="item" @click="custom">
        <img src="../assets/images/button_bg.png">
        <p>定制我的囍宴</p>
      </div>
      <router-link to="/index/gift" tag="div" class="item">
        <img src="../assets/images/button_bg.png">
        <p>我要免费领囍酒</p>
      </router-link>
    </div>

    <dialogs ref="dialogs"
             :msg="currentDialogs.msg ? currentDialogs.msg.replace(
                  '{{masterName}}', $refs.feast ? $refs.feast.masterFeast.name : '') : ''"
             :btns="currentDialogs.btns">
    </dialogs>

  </div>
</template>

<script>
  import dialogs from '@/components/dialogs';

  export default {
    name: 'index',
    data: function () {
      return {
        currentDialogs: {},
        dialogs: {
          custom: {
            msg: '定制专属囍宴<br>邀请宾客入席<br>抢999元现金贺礼',
            btns: [
              {
                value: '查看活动规则',
                href: '/index/activity_rules'
              }
            ]
          }
        }
      }
    },
    methods: {
      custom: function () {
        this.$set(this, 'currentDialogs', this.dialogs.custom);
        this.$set(this.$refs.dialogs, 'isShow', true);
      }
    },
    components: {
      dialogs
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/scss/config";

  .index {
    padding-top: setRem(235px);

    .logo {
      margin-bottom: setRem(42px);

      img {
        display: block;
        margin: auto;
        height: setRem(42px);
      }
    }

    .slogan {
      font-size: setRem(92px);
      text-align: center;
      color: #E7C598;
      margin-bottom: setRem(96px);
      line-height: 1em;

      p {
        &:not(:first-child) {
          margin-top: setRem(24px);
        }
      }
    }

    .btns {
      .item {
        position: relative;
        width: setRem(230px);
        margin: auto;
        text-align: center;
        height: setRem(45px);

        &:not(:first-child) {
          margin-top: setRem(24px);
        }

        img {
          position: absolute;
          left: -100%;
          right: -100%;
          top: 0;
          height: setRem(45px);
          margin: auto;
        }

        p {
          color: #E7C598;
          font-size: setRem(20px);
          line-height: setRem(45px);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

  }
</style>
